<template>
    <div class="com_echarts">
        <div class="chart-title">
            <img src="../../../assets/images/screen/health_resource/FilletRectangle.png" alt="">
            <p>门诊病人次均医药费用</p>
        </div>
        <div class="right_three_second" id="right_three_second"></div>
    </div>
</template>

<script>
import echarts from 'echarts';
import echartsrender from '../../../assets/js/jquery.echarts';
export default {
  name: 'right_three_second',
  data () {
    return {
        id:"right_three_second"
    }
  },
  created () {

  },
  mounted(){
      this.initMap();
  },
  methods:{
    initMap(){
        let that = this;
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById(this.id));
        var cost = [6, 7, 5]
        var totalCost = [10, 10, 10]//比例综合
        var grade = ['医院', '乡镇卫生院', '社区卫生服务中心']
        var data = {
            grade: grade,
            cost: cost,
            totalCost: totalCost
        };
        
        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow',        // 默认为直线，可选为：'line' | 'shadow'
                    label: {
                    show: true,
                    backgroundColor: '#333'
                    }
                }
            },
            grid: {
                top:'5%',
                bottom:'5%',
                left: '35%',
                right: '15%'
            },
            xAxis: {
                show: false,
            },
            yAxis: {
                type: 'category',
                axisLabel: {
                    show: true,
                    color: 'rgba(255,255,255,0.7)',
                    fontSize: 14
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                data: data.grade
            },
            series: [{
                type: 'bar',
                barGap: '-100%',
                label: {
                    normal: {
                        show: true,
                        position: 'right',
                        color: '#58ADE3',
                        fontSize: 14,
                        formatter: 
                        function(param) {
                            return data.cost[param.dataIndex] +'人次';
                        },
                    }
                },
                barWidth: '25%',
                itemStyle: {
                    normal: {
                        // borderColor: '#4DCEF8',
                        // borderWidth: 2,
                    barBorderRadius: 20,
                        color: '#001A45'
                    },
                },
                z: 1,
                data: data.totalCost,
                // data: da
            }, {
                type: 'bar',
                barGap: '-98%',
                barWidth: '25%',
                itemStyle: {
                    normal: {
                        barBorderRadius: 20,
                        color: '#00A0E8'
                    },
                },
                max: 1,
                label: {
                    normal: {
                        show: true,
                        position: 'left',
                        color: '#fff',
                        fontSize: 14,
                        formatter: function(param) {
                            return '';
                            
                        },
                    }
                },
                labelLine: {
                    show: true,
                },
                z: 2,
                data: data.cost,
            }]
        }
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
 
  }
}
</script>
<style lang='scss'  rel="stylesheet/scss" scoped>
.com_echarts{
    width:100%;
    height:100%;
}
.chart-title{
    img{
        float: left;
        width: 6px;
        height: auto;
        margin-left: 5px;
        margin-top: 5px;
    }
    p{
        font-size: 12px;
        color: #58ADE3;
        line-height: 2.5;
        margin-left: 15px;
    }
}
.right_three_second{
    width:99%;
    height:86%;
    float: left;
}
</style>
